import React, { useState, useEffect } from 'react';
import classnames from 'classnames';
import moment from 'moment';
import { connect } from 'dva';
import { Icon, Modal, Table, Empty } from 'antd';
import Service from '@/public/http/services';
import style from './index.css';
const { Column } = Table;
const pageSize = 10;
const GoodsModal: React.FC<any> = ({ visible, title, onOK, onCancel, dispatch }) => {
    const [curPage, setCurPage] = useState(1);
    const [total, setTotal] = useState(0);
    const [list, setList] = useState([]);
    useEffect(() => {

    }, [])

    return (
        <Modal
            visible={visible}
            title={title}
            okText={'添加'}
            cancelText={'取消'}
            onOk={onOK}
            onCancel={onCancel}
            width={'65%'}
        >

            <Table
                className={classnames(style.mt16, style.expert_list)}
                locale={{ emptyText: <Empty description={'无数据'} /> }}
                dataSource={list}
                pagination={{ total, current: curPage, pageSize, onChange: setCurPage }}
                rowKey={(record: any) => record.id}
            >
                <Column title={'编号ID'} width={64} dataIndex={'id'} key={'id'} />
                <Column title={'商品名称'} key={'username'}
                    render={(value, record: any) => {
                        return <span className={style.thumbnail}>
                            < img src={record.hPortrait} />
                            {record.nickname}
                        </span>
                    }}
                />
                <Column title={'是否热门'} dataIndex={'hot'} key={'hot'} />
                <Column title={'所属分类'} dataIndex={'expertRoleName'} key={'expertRoleName'} render={(value) => <span style={LevelStyle[value]}>{value}</span>} />
                <Column title={'价格'} dataIndex={'price'} key={'price'} />
                <Column title={'商品描述'} dataIndex={'desc'} key={'desc'} />
                <Column title={'创建时间'} dataIndex={'cTime'} key={'cTime'} render={(value) => moment(value).format('YYYY-MM-DD hh:mm:ss')} />
            </Table>
        </Modal>
    );
}
export default GoodsModal;